<template>
    <div>
        <div class="shop_cart">
            <div class="content">
                <div class="content_left" @click="toggleShow">
                    <div class="logo_bg">
                        <div class="logo" :class="{highlight:totalCount}">
                            <i class="iconfont icon--gouwuche" :class="{highlight:totalCount}"></i>
                        </div>
                        <div class="num" v-if="totalCount">{{totalCount}}</div>
                    </div>
                </div>
                <div class="content_center" @click="toggleShow">
                    <p class="price" :class="{highlight:totalCount}">￥{{totalPrice}}元</p>
                    <p class="desc">需要配送费{{info.deliveryPrice}}元</p>
                </div>
                <div class="content_right" :class="payClass">
                    {{payText}}
                </div>
            </div>
            <transition name="fadeUp">
                <div class="shopcart_list" v-show="isShow">
                    <div class="list_header" >
                        <h1 class="title">购物车</h1>
                        <div class="clear" @click="clearCart">清空</div>
                    </div>
                    <div class="list_content">
                        <ul>
                            <li class="food border-1px" v-for="(food ,index) in cartFoods" :key="index">
                                <div class="food_name">
                                    <span>{{food.name}}</span>
                                    <span class="color">￥{{food.price}}</span>
                                </div>
                                <div class="cartcontrol">
                                    <CartControl :food="food"></CartControl>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </transition>

        </div>
        <div class="cover" v-show="isShow" @click="toggleShow"></div>
    </div>
</template>

<script>
    import {MessageBox} from 'mint-ui'
    import BScroll from 'better-scroll'
    import CartControl from '../CartControl/CartControl.vue'
    import {mapState,mapGetters} from 'vuex'
    export default {
        name: "ShopCart",
        data(){
            return {
                isShow:false
            }
        },
        components:{
            CartControl
        },
        watch:{
            totalCount(neww,oldd){
              if(neww===0){ //当总数量为0时候，购物车自动隐藏
                  this.isShow=false;
              }
            }
        },
        computed:{
            ...mapState(["cartFoods","info"]),
            ...mapGetters(["totalCount","totalPrice"]),

            payClass(){
                const {totalCount,totalPrice}=this ;//解构赋值
                const {minPrice} =this.info;
                return  totalPrice<minPrice ? 'not-enough':'enough'
            },
            payText(){
                const {totalCount,totalPrice}=this ;//解构赋值
                const {minPrice} =this.info;
                if(totalPrice===0){
                    return `最低￥${minPrice}起送`
                }else if(totalPrice<minPrice){
                    return `还差￥${minPrice-totalPrice}元`
                }else{
                    return '去结算'
                }

            }

        },
        methods:{
            toggleShow(){
                if(this.totalCount>0){ //只有数字大于0 ，才能切换。显示隐藏购物车
                    this.isShow=!this.isShow;
                }


                //console.log(localStorage.defaultCartFoods)
            },
            //清空购物车
            clearCart(){

                MessageBox.confirm('确定要清空购物车吗').then(action => {
                this.$store.dispatch("clearCart")
                });

            }
        },
        mounted(){
            // let qq={};
            // console.log(3+qq.aa*qq.bb)
        },
        updated(){
            let list_content=document.getElementsByClassName("list_content")[0];
            //实现滚动单例，避免多次重复性产生滚动对象
           // this.scroll=new BScroll(list_content,{click:true}) //即使这样写，也会重复创建很多个this.scroll。造成点击一下突变好多
            if(!this.scroll) {
                this.scroll = new BScroll(list_content, {click: true})
            }else{ //刷新，不会首次卡
                this.scroll.refresh() //对scroll滚动条进行刷新，刚开始scroll对象不知道里面长度已经够了。
            }

        }

    }
</script>

<style lang="stylus" scoped>
    @import '../../assets/mixin.styl'
.shop_cart
    position:fixed
    left:0
    right:0
    bottom:0
    z-index:10
    height:1rem
    background #141d27
    transform-style:preserve-3d
    .content
        position:relative
        width:100%
        display flex
        font-size 0
        color rgba(255, 255, 255, 0.4)
        align-items:center
        z-index:1200
        transform:translateZ(5px)
        .content_left
            height:1rem
            width:1.8rem
            position:relative
            //z-index:15
            .logo_bg
                position:absolute
                top: -0.2rem
                left:0.3rem
                width:1.2rem
                height:1.2rem
                border-radius:0.6rem
                background #141d27
                .logo
                    width:0.9rem
                    height:0.9rem
                    margin:0.15rem
                    border-radius:0.45rem
                    background:#2b343c
                    &.highlight
                        background:green
                    .iconfont
                        padding-left:0.1rem
                        font-size:0.7rem
                        text-align:center
                        line-height:0.9rem
                        &.highlight
                            color:#fff
                .num
                    position:absolute
                    right:0
                    top:0
                    min-width:0.5rem
                    height:0.3rem
                    line-height:0.3rem
                    border-radius:0.15rem
                    font-size:0.2rem
                    text-align:center
                    color:#fff
                    background:red
        .content_center
            //position:absolute
            //left:1.8rem
            flex:1
            font-size:0.3rem
            height:1rem
            .price
                font-size:0.32rem
                font-weight:600
                height:0.6rem
                line-height:0.6rem
                &.highlight
                    color:#fff
            .desc
                font-size:0.24rem
        .content_right
            min-width:1.6rem
            text-align:center
            font-size: 0.25rem
            font-weight:600
            color: #ffffff
            padding:0 0.2rem
            line-height:1rem
            &.not-enough
                background:#2b343c
            &.enough
                background:green
                color:#fff


    .shopcart_list
        position:absolute
        left:0
        right:0
        bottom:1rem
        width:100%
        z-index:-1
        //transform:translateY(10px)
        &.fadeUp-enter,&.fadeUp-leave-to
            opacity:0
            transform:translateY(50%)
        &.fadeUp-enter-active,&.fadeUp-leave-active
            transition:all 0.3s
        .list_header
            height:0.8rem
            background:#cccccc
            display:flex
            align-items:center
            border:1px solid #ccc
            .title
                flex:1
                font-size:0.36rem
            .clear
                height:100%
                line-height:0.8rem
                padding:0 0.2rem
                background:#f3f5f7
                font-size:0.36rem
                color:green


        .list_content
            background:#fff
            max-height:4rem
            overflow:hidden
            .food
                display:flex
                height:0.8rem
                bottom-border-1px(#ccc)
                align-items :center
                .food_name
                    flex:1
                    font-size:0.36rem
                    .color
                        color:red
                        float:right
                        padding-right:0.2rem
                .cartcontrol
                    width:1.6rem
                    //height:0.4rem
                    //background:yellow
                    padding:0.2rem 0
                    margin-right:0.3rem
.cover
    position:fixed
    left:0
    top:0
    bottom:0
    right:0
    background:rgba(88,88,88,0.6)
</style>
